<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb 
          separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片 -->
    <el-card>
      <el-row>
        <el-col>
          <el-button type="primary" @click="openDialog">添加分类</el-button>
        </el-col>
      </el-row>
      <!-- 表格区域 -->
      <tree-table class="tree-table" 
          :data="cateList" 
          :columns="columns" 
          :selection-type="false"
          :expand-type="false"
          show-index
          index-text="#"
          border >
          <!-- slot-scope 接受数据 -->
        <template slot="isok" slot-scope="scope">
          <i class="icon el-icon-success" v-if="scope.row.cate_del === false"></i>
          <i class="icon el-icon-error" v-else></i>
        </template>
        <!-- 排序 -->
        <template slot="order" slot-scope="scope">
          <el-tag size="mini" v-if="scope.row.type === 1">一级</el-tag>
          <el-tag type="success" size="mini" v-else-if="scope.row.type === 2">二级</el-tag>
          <el-tag type="warning" size="mini" v-else>三级</el-tag>
        </template>
        <template slot="opt">
          <el-button type="primary" size="mini" icon="el-icon-edit">编辑</el-button>
          <el-button type="danger" size="mini" icon="el-icon-delete">删除</el-button>
        </template>
      </tree-table>
      
      <!-- 底部区域 -->
      <el-pagination 
            @size-change="handleSizeChange"
            @current-page="handleCurrentChange"
            :current-page="queryInfo.pagenum"
            :page-sizes="[30, 60, 100]"
            :page-size="queryInfo.pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">

      </el-pagination>
    </el-card>

    <!-- 添加分类对话框 -->
    <el-dialog 
            title="添加分类" 
            :visible.sync="setDialogVisible"
            width="35%"
            :modal="false">
      <!-- 添加分类表单 -->
      <el-form 
            :model="addCateForm"
            :rules="addCateFormRules"
            ref="addCateForm"
            label-width="100px">
        <el-form-item label="分类名称:" prop="goodsName">
          <el-input v-model="addCateForm.goodsName"></el-input>
        </el-form-item>
        <el-form-item label="父级分类:" prop="type">
          <!-- 添加级联选择框 -->
          <el-cascader
                  expand-trigger="hover"
                  :options="parentList"  
                  :props="cascaderProps"
                  v-model="selectedKeys"
                  @change="parentCateChange"
                  clearable
                  change-on-select>

          </el-cascader>
        </el-form-item>
      </el-form>
      <!-- 底部区域 -->
      <span slot="footer">
        <el-button type="primary" @click="addCate">确定</el-button>
        <el-button @click="cateDialogClose">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>

export default {
  name: 'Cate',
  data() {
    return {
      // 控制添加分类对话框的显示与隐藏
      setDialogVisible: false,
      // 父级列表
      parentList: [],
      // 指定级联选择器的对象
      cascaderProps: {
        value: 'cate_pid',
        label: 'goodsName',
        children: 'children'
      },
      // 选中的父级分类 id 
      selectedKeys: [],
      // 查询条件
      queryInfo: {
        type: 3,
        pagenum: 1,
        pagesize: 5
      },
      // 商品分类的数据列表
      cateList: [],
      total: 0,
      // 为 tree-table 指定列的定义
      columns: [
        {
          label: '分类名称',
          prop: 'goodsName'
        },
        {
          label: '是否有效',
          // 表示将当前列定义为模板列
          type: 'template',
          template: 'isok'
        },
        {
          label: '排序',
          type: 'template',
          template: 'order'
        },
        {
          label: '操作',
          type: 'template',
          template: 'opt'
        }
      ],
      // 添加分类的表单数据对象
      addCateForm: {
        goodsName: '',
        cate_pid: 1,
        type: 1,
      },
      // 添加分类表单的验证规则对象
      addCateFormRules: {
        goodsName: [
          {
            required: true,
            message: '请输入分类名称',
            trigger: 'blur'
          }
        ]
      },
    }
  },
  methods: {
    // 获取商品分类数据
    async getCateList() {
      const { data: res } = await this.axios.get('data/categories.json');

      if (res.meta.status !== 200) {
        return this.$message.error('获取商品分类信息失败');
      }
      this.cateList = res.data
      this.total = res.data.length;
      console.log(this.cateList);
      this.$message.success('获取商品分类信息成功')
    },
    // 监听 pagesize 改变
    handleSizeChange(newSize) {
      this.queryInfo.pagesize = newSize
      this.getCateList();
    },
    // 监听 pagenum 改变
    handleCurrentChange(newPage) {
      this.queryInfo.pagenum = newPage
      this.getCateList();
    },
    // 点击 [添加分类] 
    openDialog() {
      // 打开对话框的同时,获取父级分类数据
      this.getParentCateList();
      this.setDialogVisible = true
    },
    // 获取父级分类列表
    async getParentCateList() {
      const { data: res } = await this.axios.get('data/categories.json');
      if (res.meta.status !== 200) {
        return this.$message.error('获取父级分类数据失败')
      }
    
      this.parentList = res.data
    
      this.$message.success('获取父级分类数据成功')
    },
    // 选择项发生变化时触发
    parentCateChange() {
      console.log(this.selectedKeys);

      // 如果 selectedKeys 数组中的 length > 0, 证明有父级分类
      if (this.selectedKeys.length > 0) {
        // 父级分类的 id
        this.addCateForm.cate_pid = this.selectedKeys[ this.selectedKeys.length - 1]
        // 为当前分类的等级赋值
        this.addCateForm.type = this.selectedKeys.length;
        return
      } else {
        // 否则没有父级分类,需要创建一个新的父级分类
        this.addCateForm.cate_pid = 0
        this.addCateForm.type = 1
      }
    },
    // 点击 [确定] 添加分类
    addCate() {
      // console.log(this.addCateForm);
      this.$refs.addCateForm.validate(async valid => {
        if (!valid) return
        const {data: res} = await this.axios.post('data/categories.json');

        if (res.meta.status !== 201) {
          return this.$message.error('添加分类失败');
        }

        this.$message.success('添加分类成功');
        this.getCateList();
        this.setDialogVisible = false
      })
    },
    // 监听 cateDialog 关闭事件
    cateDialogClose() {
      this.addCateForm.resetFields();
      this.selectedKeys = []
      this.addCateForm.cate_pid = 0
      this.addCateForm.type = 0
    }
  },

  // 当组件被创建时调用方法
  created() {
    this.getCateList();
  },
}
</script>

<style lang="less" scoped>
  .el-card {
    margin-top: 15px;
  }
  .tree-table {
    margin: 15px 0 10px 0;
  }
  .icon {
    color: rgba(0, 128, 107, 0.767);
  }
  .el-cascader {
    width: 100%;
  }
</style>